<template>
<!---->
  <el-row>
    <el-col :span="24">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>支付管理</el-breadcrumb-item>
        <el-breadcrumb-item>支付列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
<!--表格-->
  <el-row>
    <el-col :span="24">
      <el-table :data="payInfoList" border stripe style="width: 100%">
        <el-table-column prop="id" label="编号" width="100" />
        <el-table-column prop="user.username" label="用户名" width="250" />
        <el-table-column  label="支付平台" width="180">
          <template #default="scope">
            <el-tag v-if=" scope.row.payPlatform == 1" type="success">支付宝</el-tag>
            <el-tag v-if=" scope.row.payPlatform == 2" type="info">微信</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="platformNumber" label="支付流水号" width="350"/>
        <el-table-column  label="支付状态">
          <template #default="scope">
            <el-tag v-if=" scope.row.platformStatus == 'WAIT_BUYER_PAY'" type="success">
              等待买家支付
            </el-tag>
            <el-tag v-if=" scope.row.platformStatus == 'TRADE_SUCCESS'" type="info">
              支付成功
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
<!--分页-->
  <el-row>
    <el-col :span="24">
      <el-pagination
          v-model:current-page="queryVo.currentPage"
          v-model:page-size="queryVo.pageSize"
          :page-sizes="[1 , 2, 3, 4]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-col>
  </el-row>
</template>

<script>
import {getCurrentInstance , onMounted} from "vue";

import { getAllPayInfo } from "../../api/apiInfo.js";


export default {
  name: "PayList"
  ,data() {
    return{
      queryVo: {
        currentPage: 1,
        pageSize: 2
      },
      totalCount: 0,
      payInfoList: [
        {
          "id": 53,
          "userId": 1,
          "orderNo": 1492090946105,
          "payPlatform": 1,
          "platformNumber": "2017041321001004300200116250",
          "platformStatus": "WAIT_BUYER_PAY",
          "createTime": "2017-04-13 13:42:33",
          "updateTime": "2017-04-13 13:42:33",
          "user": {
            "id": 1,
            "username": "admin",
            "password": null,
            "email": "admin@happymall.com",
            "phone": "13800138000",
            "question": "问题",
            "answer": "答案",
            "role": 0,
            "createTime": "2016-11-06 08:56:45",
            "updateTime": "2017-04-04 11:27:36",
            "salt": null
          }
        },]
    }
  },
  methods: {
    //改变页大小
    handleSizeChange(val){
      console.log(val);
      this.queryVo.pageSize = val;
      this.loadPayInfoData();
    },
    //改变页码
    handleCurrentChange(val){
      console.log(val);
      this.queryVo.currentPage = val;
      this.loadPayInfoData();
    },
    async loadPayInfoData(){

      const {data: ret} = await getAllPayInfo(this.queryVo);
      console.log(ret);
      if (ret['code'] == 4001){
          //查询成功
        this.payInfoList = ret['data']['data'];
        this.totalCount = ret['data']['totalCount'];
      }
    }
  },
  setup(){
    const { ctx: ctx } = getCurrentInstance();
    onMounted(() =>{
      ctx.loadPayInfoData();
    })
  }
}
</script>

<style scoped>

</style>